<template>
  <div class="work-space-container">
    <div class="data-overview"><span>数据概况</span></div>
    <div class="data-container">
      <div class="data-item" v-for="(item, index) in cardData" :key="index">
        <cardDemo :cardData="item"></cardDemo>
      </div>
    </div>
    <div class="data-overview"><span>数据统计</span></div>
    <div class="chart-container">
      <div class="char-item">
        <div class="chart-name">新增用户折线图</div>
        <div class="time-container">
          <div class="block">
            <el-date-picker
              v-model="UserTimePickerDate"
              :type="timePicker"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </div>
          <div class="timeType">
            <el-select
              v-model="timeTypeValue"
              placeholder="请选择日期格式...."
              @change="changeTimeType"
            >
              <el-option
                v-for="item in timeType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="handleQuery">
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQueryUser"
              >搜索</el-button
            >
          </div>
        </div>
        <dataChartDemo
          :charData="userStatisticData"
          ref="userChart"
        ></dataChartDemo>
      </div>
      <div class="char-item">
        <div class="chart-name">新增发帖折线图</div>
        <div class="time-container">
          <div class="block">
            <el-date-picker
              v-model="VistorTimePickerDate"
              :type="VistorTimePicker"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </div>
          <div class="timeType">
            <el-select
              v-model="VistorTimeTypeValue"
              placeholder="请选择日期格式...."
              @change="changeTimeTypeVistor"
            >
              <el-option
                v-for="item in VistorTimeType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="handleQuery">
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQueryVistor"
              >搜索</el-button
            >
          </div>
        </div>
        <dataChartDemo
          :charData="VistorStatisticData"
          ref="VistorChart"
        ></dataChartDemo>
      </div>
    </div>
  </div>
</template>

<script>
import cardDemo from "@/views/workspace/cardDemo/index.vue";
import dataChartDemo from "@/views/workspace/dataChartDemo/index.vue";
import {
  getUserStatisticsStrategy,
  getPostStatisticsStrategy,
  getNewUserStatisticsStrategy,
  getReportStatisticsStrategy,
  getVisitorStatisticsStrategy,
  getCommentStatisticsStrategy,
  getAppealStatisticsStrategy,
  getUserStatistic,
  getVistorStatistic,
} from "@/api/szpt/workspace";
import { time } from "echarts";
export default {
  components: {
    cardDemo,
    dataChartDemo,
  },
  data() {
    return {
      timeTypeValue: "YEAR",
      timePicker: "year",
      UserTimePickerDate: new Date(),
      VistorTimeTypeValue: "YEAR",
      VistorTimePicker: "year",
      VistorTimePickerDate: new Date(),
      //卡片数据
      cardData: [],
      //   时间表
      userStatisticData: {},
      VistorStatisticData: {},
      timeType: [
        {
          label: "按年搜索",
          value: "YEAR",
        },
        {
          label: "按月搜索",
          value: "MONTH",
        },
      ],
      VistorTimeType: [
        {
          label: "按年搜索",
          value: "YEAR",
        },
        {
          label: "按月搜索",
          value: "MONTH",
        },
      ],
      userStatisticForm: {
        DateType: "",
        statisticsDate: "",
      },
      VistorStatisticForm: {
        DateType: "",
        statisticsDate: "",
      },
    };
  },
  methods: {
    // 处理数据卡片数据
    fmtCardData(dataArray, flag) {
      if (dataArray instanceof Array && dataArray.length > 1) {
        const data = {
          headerName: dataArray[0].name,
          headerValue: dataArray[0].value,
          headerUnit: dataArray[0].unit,
          headerPath: dataArray[0].path,
          footerName: dataArray[1].name,
          footerValue: dataArray[1].value,
          footerUnit: dataArray[1].unit,
          footerPaht: dataArray[1].path,
        };
        if (flag === "总量") {
          data.flag = "总量";
        } else if (flag === "帖子") {
          data.flag = "全部";
        } else if (flag === "用户") {
          data.flag = "今日";
        } else {
          data.flag = "总量";
        }
        this.cardData.push(data);
      }
    },
    fmtCharData(data) {
      const fmtData = {
        xAxisData: [],
        seriesData: [],
      };
      if (data instanceof Array && data.length > 0) {
        data.forEach((item) => {
          fmtData.xAxisData.push(item.date);
          fmtData.seriesData.push(item.total);
        });
        return fmtData;
      } else {
        return fmtData;
      }
    },
    fmtTime(date) {
      if (date) {
        let time = "";
        if (this.userStatisticForm.DateType === "MONTH") {
          time = date.getFullYear() + "-" + (date.getMonth() + 1);
        } else if (this.userStatisticForm.DateType === "YEAR") {
          time = date.getFullYear();
        }
        this.userStatisticForm.statisticsDate = time.toString();
      }
    },
    fmtTimeVistor(date) {
      if (date) {
        let time = "";
        if (this.VistorStatisticForm.DateType === "MONTH") {
          time = date.getFullYear() + "-" + (date.getMonth() + 1);
        } else if (this.VistorStatisticForm.DateType === "YEAR") {
          time = date.getFullYear();
        }
        this.VistorStatisticForm.statisticsDate = time.toString();
      }
    },
    // 获取用户折线图
    handleQueryUser() {
      this.$modal.loading("玩命加载中....");
      this.fmtTime(this.UserTimePickerDate);
      getUserStatistic(this.userStatisticForm)
        .then((resp) => {
          if (resp.code == 200) {
            this.userStatisticData = this.fmtCharData(resp.data);
            this.userStatisticData.name = "新增用户数据";
            this.userStatisticData.id = "$%$%AF23123@$SADF";
            this.$refs.userChart.updateChartData(this.userStatisticData);
          }
        })
        .catch((err) => {
          console.log(err);
          this.$modal.closeLoading();
        });
      this.$modal.closeLoading();
    },
    handleQueryVistor() {
      this.$modal.loading("玩命加载中....");
      this.fmtTimeVistor(this.VistorTimePickerDate);
      getVistorStatistic(this.VistorStatisticForm)
        .then((resp) => {
          if (resp.code == 200) {
            this.VistorStatisticData = this.fmtCharData(resp.data);
            this.VistorStatisticData.name = "新增发帖数据";
            this.VistorStatisticData.id = "$%$fasdfwer23@$SADF";
            this.$refs.VistorChart.updateChartData(this.VistorStatisticData);
          }
        })
        .catch((err) => {
          console.log(err);
          this.$modal.closeLoading();
        });
      this.$modal.closeLoading();
    },
    changeTimeType(data) {
      if (data === "YEAR") {
        this.timePicker = "year";
        this.userStatisticForm.DateType = "YEAR";
      } else if (data === "MONTH") {
        this.timePicker = "month";
        this.userStatisticForm.DateType = "MONTH";
      }
    },
    changeTimeTypeVistor(data) {
      if (data === "YEAR") {
        this.VistorTimePicker = "year";
        this.VistorStatisticForm.DateType = "YEAR";
      } else if (data === "MONTH") {
        this.VistorTimePicker = "month";
        this.VistorStatisticForm.DateType = "MONTH";
      }
    },
  },
  mounted() {
    this.userStatisticForm.DateType = "YEAR";
    this.VistorStatisticForm.DateType = "YEAR";
    this.handleQueryUser();
    this.handleQueryVistor();
    // 用户量
    getUserStatisticsStrategy().then((resp) => {
      if (resp.code === 200) {
        this.fmtCardData(resp.data, "总量");
      }
    });
    // 帖子总量
    getPostStatisticsStrategy().then((resp) => {
      if (resp.code === 200) {
        this.fmtCardData(resp.data, "帖子");
      }
    });
    getNewUserStatisticsStrategy().then((resp) => {
      if (resp.code === 200) {
        this.fmtCardData(resp.data, "用户");
      }
    });

    getReportStatisticsStrategy().then((resp) => {
      if (resp.code === 200) {
        this.fmtCardData(resp.data, "");
      }
    });
    getVisitorStatisticsStrategy().then((resp) => {
      if (resp.code === 200) {
        this.fmtCardData(resp.data, "");
      }
    });
    getCommentStatisticsStrategy().then((resp) => {
      if (resp.code === 200) {
        this.fmtCardData(resp.data, "");
      }
    });
    getAppealStatisticsStrategy().then((resp) => {
      if (resp.code === 200) {
        this.fmtCardData(resp.data, "");
      }
    });
  },
};
</script>

<style lang="scss" scoped>
.work-space-container {
  width: 100%;
  height: 100%;
  padding: 15px;
  background-color: #ffff;
  .data-overview {
    width: 100%;
    height: 40px;
    padding-left: 20px;
    line-height: 40px;
    color: #333;
    font-weight: bold;
  }
  .data-container {
    width: 100%;
    height: auto;
    display: flex;
    padding: 0 10% 0 10%;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 20px;
    border-radius: 10px;
    overflow: hidden;
    background-color: rgb(247, 248, 252);

    .data-item {
      width: 22%;
      height: 160px;
      margin: 0 30px 30px 0;
      border-radius: 8px;
      overflow: hidden;
      cursor: pointer;
      box-shadow: 5px 5px 5px rgb(240, 240, 240);
    }
    .data-item:hover {
      box-shadow: 5px 5px 5px rgb(218, 217, 217);
    }
  }
  .chart-container {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    background-color: rgb(247, 248, 252);
    border-radius: 10px;
    overflow: hidden;
    .char-item {
      width: 100%;
      height: auto;
      border-radius: 8px;
      padding-top: 20px;
      overflow: hidden;
      background-color: transparent;
      margin-left: 50px;
      //box-shadow: 5px 5px 5px rgb(240, 240, 240);
      .chart-name {
        width: 100%;
        height: 40px;
        line-height: 40px;
        font-weight: bold;
        color: #666;
      }
      .time-container {
        width: 100%;
        height: auto;
        display: flex;
        padding: 10px 0 10px 9%;
        justify-content: flex-start;
        align-content: center;
        background-color: rgb(255, 255, 255);
        .block {
          width: auto;
          height: 100%;
          justify-content: center;
        }
        .timeType {
          margin-left: 10px;
        }
        .handleQuery {
          width: 100px;
          height: 35px;
          display: flex;
          justify-content: center;
          align-content: center;
          margin-left: 20px;
        }
      }
    }
    .char-item:hover {
      cursor: pointer;
      background-color: transparent;
      // box-shadow: 5px 5px 5px rgb(218, 217, 217);
    }
  }
}
</style>
